<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>我的图片</title>
[#include "/includes/header.html" /]
<script type="text/javascript">
</script>
<style type="text/css">
.page-showcase-attachment {
    position: relative;
    width: 80%;
}
.page-showcase-attachment::after {
    clear: both;
    content: "";
    display: table;
}
.page-showcase-attachment .media-container {
    margin-right: 150px;
    overflow: hidden;
}
.page-showcase-attachment .category-container {
    background: #f8f8f8 none repeat scroll 0 0;
    box-sizing: border-box;
    float: right;
    min-height: 400px;
    padding: 10px 0;
    width: 200px;
}
.page-showcase-attachment .category-list {
    margin-bottom: 15px;
    max-height: 996px;
    overflow-y: auto;
}
.page-showcase-attachment .category-list li {
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    margin-right: 1px;
    padding: 0 31px 0 8px;
    position: relative;
}
.page-showcase-attachment .category-list li:hover {
    background: #fafafa none repeat scroll 0 0;
}
.page-showcase-attachment .category-list li.active {
    background: #fff none repeat scroll 0 0;
}
.page-showcase-attachment .category-list .category-name {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80px;
}
.page-showcase-attachment .category-list .category-num {
    color: #999;
    position: absolute;
    right: 8px;
    top: 0;
}
.ui-box {
    margin-bottom: 15px;
}

.ui-btn-success {
    background: #4b0 none repeat scroll 0 0;
    border-color: #3da900;
    color: #fff;
}
.ui-btn {
    background: #f8f8f8 none repeat scroll 0 0;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-sizing: content-box;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    padding: 0 12px;
    text-align: center;
}

.page-showcase-attachment .media-title {
    height: 28px;
}
.page-showcase-attachment .media-title-wrap h1 {
    display: inline;
    font-size: 16px;
    line-height: 28px;
}
.page-showcase-attachment .media-title-wrap h1, .page-showcase-attachment .media-title-wrap a {
    margin-right: 10px;
}

.page-showcase-attachment .action-bar {
    background: #f8f8f8 none repeat scroll 0 0;
    line-height: 28px;
    margin-bottom: 20px;
    min-height: 28px;
    padding: 6px;
}
.page-showcase-attachment .action-bar label {
    display: inline-block;
}
.page-showcase-attachment .action-bar label input[type="checkbox"] {
    margin: 0 6px 0 0;
    vertical-align: baseline;
}
.page-showcase-attachment .action-bar .batch-opt {
    margin-left: 20px;
}

.page-showcase-attachment .image-list {
    margin: 0 0 0 -20px;
}
.page-showcase-attachment .image-list::after {
    clear: both;
    content: "";
    display: table;
}
.page-showcase-attachment .image-item {
    float: left;
    margin: 0 0 20px 20px;
    width: 100px;
}
.page-showcase-attachment .image-item .image-box {
    background: #ddd none no-repeat scroll 50% 50% / cover ;
    height: 100px;
    width: 100px;
}
.page-showcase-attachment .image-item .image-title {
    padding: 8px 0 0;
}
.page-showcase-attachment .image-item .image-title label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 160px;
}
.page-showcase-attachment .image-item .image-title label input[type="checkbox"] {
    margin: 0 6px 0 0;
    vertical-align: baseline;
}
.page-showcase-attachment .image-item .image-opt a {
    margin-right: 8px;
}
.page-showcase-attachment .action-bar {
    background: #f8f8f8 none repeat scroll 0 0;
    line-height: 28px;
    margin-bottom: 20px;
    min-height: 28px;
    padding: 6px;
}
</style>
<body class="fixed-sidebar full-height-layout gray-bg">
[#include "/includes/menus.html" /]
<div class="wrapper wrapper-content">
	<div class="row content-tabs">
		<nav class="page-tabs J_menuTabs">
	       <div class="page-tabs-content" style="margin-left: 0px;">
	           <a href="${webctx}/shop" class="J_menuTab">基本信息</a>
		       <a href="${webctx}/shop/sendaddr" class="J_menuTab">发货地址</a>
		       <a href="${webctx}/attachment" class="J_menuTab active">我的文件</a>
	       </div>
	   	</nav>
	</div>
<div class="row ibox-content">

<div class="page-showcase-attachment" id="mainTable">
   <div class="category-container">
	   <div>
		   <ul class="category-list">
		   [#if imageGroups??]
		   [#list imageGroups as list]
			   <li class="ui-tooltip" data-id="${list.id}" data-name="${list.groupName}">
			      <span class="category-name">${list.groupName}</span>
			      <span class="category-num">${list.imageNum}</span>
			   </li>
           [/#list]
           [/#if]
			   </ul>
		   <div class="text-center">
		   <a id="addGroup" href="javascript:;" class="ui-btn text-center">+ 添加分组</a>
		   </div>
	   </div>
   </div>
   
   <div class="media-container">
     <div class="media-title ui-box">
		<span class="media-title-wrap">
		<h1>全部</h1>
		</span>
		<a id="uploadImage" class="ui-btn ui-btn-success pull-right" href="javascript:;">上传图片</a>
	</div>
	
	<div class="action-bar clearfix">
		<label class="inline">
		<input type="checkbox" id="all" title="全选/反选">
		全选
		</label>
		<a class="batch-opt c-gray" href="javascript:;" style="cursor: not-allowed;">修改分组</a>
		<a class="batch-opt c-gray" href="javascript:;" style="cursor: not-allowed;">删除</a>
    </div>
   
    <div class="image-list">
<!-- 		<div class="image-item">
		<div class="image-box" style="background-image: url('http://120.76.79.206/group1/M00/00/25/eExPzlhpsaKAXX8hAAAaGSlN8-0291.jpg');"></div>
		<div class="image-title">
			<label><input type="checkbox">57d8cb71N9a3470e2.jpg</label>
			</div>
			<div class="image-opt">
			 <a href="javascript:;">分组</a>
			 <a href="javascript:;">删除</a>
			</div>
		</div>
		<div class="image-item">
		<div class="image-box" style="background-image: url('http://120.76.79.206/group1/M00/00/25/eExPzlhpsaKAXX8hAAAaGSlN8-0291.jpg');"></div>
		<div class="image-title">
			<label><input type="checkbox">57d8cb71N9a3470e2.jpg</label>
			</div>
			<div class="image-opt">
			 <a href="javascript:;">分组</a>
			 <a href="javascript:;">删除</a>
			</div>
		</div> -->
   </div>
   
   
   <div class="action-bar clearfix">
       			<div id="pager" class="jqpager" style="margin-bottom: 1px;float: right;"></div>
   </div>
   
   </div>
</div>
</div>
</div>
[#include "/includes/footer.html" /]
<script type="text/javascript">
var addGroupDialog;
$(document).ready(function() {
	searchImg();
	 $("ul.category-list li").click(function() {
		 $("ul.category-list li").each(function(){	
			 $(this).removeClass("active");
		}); 
		 $(this).addClass("active");
		$("h1").html($(this).attr("data-name"));
		searchImg(null,$(this).attr("data-id"));
	 });
	 
	 $("#uploadImage").click(function() {
		 var id=$("ul.category-list li.active").attr("data-id");
		 var params={};
         if(id){
        	 params.groupId=id; 
		  }
		 obz.uploadImage(params,function (){
			 location.href=obz.ctx+"/attachment"; 
		 });
	 });

	 $("#addGroup").click(function() {
		 addGroupDialog = BootstrapDialog.show({
				size: BootstrapDialog.SIZE_LARGE,
				title: "添加分组",
		        message: $('<div></div>').load(obz.ctx+'/attachment/addGroup')
		    });
	 });

});
var pageClick = function(pageNo) {
	var id=$("ul.category-list li.active").attr("data-id");
	if(id){
		searchImg(pageNo,id);
	}else{
		searchImg(pageNo);
	}
	
}
var searchImg = function(currPage,id){
	var params = {};
	//其他查询条件
	if(currPage){
		params.page = currPage;
	}
	if(id){
		params.id = id;
	}
	$("#mainTable").mask("加载中...");
	var url = obz.ctx + "/attachment/getImageList";
	obz.ajaxJson(url, params, function(resp){
		$("#mainTable").unmask();
		var result = resp.data;
		$(".image-list").empty();
		if(currPage){
			$("#pager").pager({ pagenumber:currPage, recordcount:result.totalRow, pagesize:result.pageSize, recordtext:'共 {0} 页, {1} 条记录', buttonClickCallback: pageClick });
		}else{
			$("#pager").pager({ recordcount:result.totalRow, pagesize:result.pageSize, recordtext:'共 {0} 页, {1} 条记录', buttonClickCallback: pageClick });	
		}
		
		var dataList = result.list;
		if(dataList.length>0){
			for(var i=0;i<dataList.length;i++){
				var _row = dataList[i];
				var trHtml = obz.dataTemplate4obj($("#image_item_tpl").html(), _row);
				$(".image-list").append(trHtml);
			}
		}
		
	});
	
}
searchImg();

function del(obj){
	var ids=$(obj).attr("id");
	obz.showMessage("确定删除该图片？", function(){
		obz.ajaxJson(obz.ctx + "/attachment/del", {ids: ids}, function(resp){
			if(resp.code==200){
				searchImg();	
			}
		});
	});
	return false;
}
</script>
<script type="text/template" id="image_item_tpl">
<div class="image-item">
		<div class="image-box" style="background-image: url('{imgPath}');"></div>
		<div class="image-title">
			<label><input type="checkbox" class="commchk"  id="checkbox_{id}">{imgUrl}</label>
			</div>
			<div class="image-opt">
			 <a href="javascript:;" id="{id}" onclick="del(this)">删除</a>
			</div>
		</div>
</script>
<script type="text/javascript">
	Template.init("#menu-shop");
</script>
</body>
</head>
</html>